'use client';

import { useSession } from 'next-auth/react';
import { useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
import MainLayout from '@/components/MainLayout';

const mockNews = [
  {
    id: 1,
    title: 'OpenAI发布最新GPT-5模型',
    content: '据报道，OpenAI即将发布最新的GPT-5模型，该模型在多个领域都取得了突破性进展...',
    image: 'https://via.placeholder.com/300x200',
  },
  {
    id: 2,
    title: '谷歌推出新一代AI助手',
    content: '谷歌今日宣布推出新一代AI助手，集成了更强大的自然语言处理能力...',
    image: 'https://via.placeholder.com/300x200',
  },
  {
    id: 3,
    title: '人工智能在医疗领域取得重大突破',
    content: '最新研究表明，AI技术在医疗诊断领域取得重大突破，准确率超过人类医生...',
    image: 'https://via.placeholder.com/300x200',
  },
];

const hotNews = [
  '马斯克宣布Tesla将全面采用AI技术进行自动驾驶',
  '中国发布新一代AI发展规划，投资上万亿',
  'Facebook元宇宙项目融入更多AI技术',
  '微软收购多家AI初创公司，布局未来发展',
];

export default function Home() {
  const { data: session, status } = useSession();
  const router = useRouter();
  const [currentSlide, setCurrentSlide] = useState(0);

  useEffect(() => {
    if (status === 'unauthenticated') {
      router.push('/login');
    }
  }, [status, router]);

  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentSlide((prev) => (prev + 1) % mockNews.length);
    }, 5000);

    return () => clearInterval(timer);
  }, []);

  if (status === 'loading') {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900"></div>
      </div>
    );
  }

  if (!session) {
    return null;
  }

  return (
    <MainLayout>
      <div className="space-y-8">
        {/* Carousel */}
        <div className="relative h-64 overflow-hidden rounded-lg">
          {mockNews.map((news, index) => (
            <div
              key={news.id}
              className={`absolute inset-0 transition-opacity duration-500 ${
                index === currentSlide ? 'opacity-100' : 'opacity-0'
              }`}
            >
              <img
                src={news.image}
                alt={news.title}
                className="w-full h-full object-cover"
              />
              <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
                <h3 className="text-white text-xl font-bold">{news.title}</h3>
              </div>
            </div>
          ))}
          <div className="absolute bottom-4 left-0 right-0 flex justify-center space-x-2">
            {mockNews.map((_, index) => (
              <button
                key={index}
                onClick={() => setCurrentSlide(index)}
                className={`w-2 h-2 rounded-full transition-colors ${
                  index === currentSlide ? 'bg-white' : 'bg-white/50'
                }`}
              />
            ))}
          </div>
        </div>

        <div>
          <h2 className="text-2xl font-bold mb-4">最新资讯</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {/* News Cards */}
            {mockNews.map((news) => (
              <div
                key={news.id}
                className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow"
              >
                <img
                  src={news.image}
                  alt={news.title}
                  className="w-full h-48 object-cover"
                />
                <div className="p-4">
                  <h3 className="text-lg font-semibold mb-2">{news.title}</h3>
                  <p className="text-gray-600 text-sm line-clamp-3">{news.content}</p>
                </div>
              </div>
            ))}

            {/* Hot News Card */}
            <div className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
              <div className="h-48 bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center">
                <h3 className="text-2xl font-bold text-white px-4 text-center">
                  热点资讯
                </h3>
              </div>
              <div className="p-4">
                <div className="space-y-3">
                  {hotNews.map((news, index) => (
                    <div
                      key={index}
                      className="flex items-start space-x-2 cursor-pointer hover:text-blue-600 group"
                    >
                      <span className="text-sm font-bold text-gray-400 mt-0.5 group-hover:text-blue-600">
                        {index + 1}
                      </span>
                      <span className="flex-1 text-sm line-clamp-1">{news}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </MainLayout>
  );
}
